import { Form, Input, Button, Checkbox, message, Space, Card } from 'antd'
import logo from '@/assets/logo.png'
import './index.scss'
import { useDispatch } from 'react-redux'
import { useHistory, useLocation } from 'react-router'
import { loginAction } from '@/store/action/login'
import { getUserAction } from '@/store/action/user'
const Login = () => {
  const dispatch = useDispatch()
  const history = useHistory()

  const location = useLocation()
  console.log(location)
  const onFinish = async (formDate) => {
    // console.log(formDate)//表单数据
    try {
      await dispatch(loginAction(formDate))
      // message.success('登录成功')
      history.replace(location.state?.from || '/')
    } catch (e) {
      message.error(e.response?.data?.message || '登录失败')
    }
  }

  // 自定义函数校验
  /* rule当前表单项的校验规则
     value当前表单项的值（校验它）
     函数体内如果进行校验
     1.校验通过:Promise.resolve()
     1.校验失败:Promise.resolve(new Error('错误提示'))
  */
  const validAgree = (rule, value) => {
    if (!value) {
      return Promise.reject(new Error('请同意用户协议！'))
    } else {
      return Promise.resolve()
    }
  }
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        <Form validateTrigger={['onBlur', 'onChange']} onFinish={onFinish}
          initialValues={{
            // 属性名和Form.Item的name属性对应
            mobile: '13911111111',
            code: '246810',
            remember: true
          }}>
          {/* 手机号码 */}
          {/* 表单校验的核心：
            1.Form.Item指定name属性，name和和后台登录接口需要的参数名保持一致(必须！！！)
            2.通过rules指定表单校验规则
          */}
          <Form.Item name="mobile"
            rules={[
              {
                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message: '手机号码格式不对',
                validateTrigger: 'onBlur'
              },
              { required: true, message: '请输入手机号' }
            ]}>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          {/* 验证码 */}
          <Form.Item name="code"
            rules={[
              { len: 6, message: '验证码6个字符' },
              { required: true, message: '请输入验证码' }
            ]}>
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          {/* 密码 */}
          {/* <Form.Item
            name="password"
            rules={[{ required
            <Input.Password size="large" placeholder="请输入密码" />
          </Form.Item> */}
          {/* 协议选择框 */}
          <Form.Item name="remember"
            valuePropName="checked" rules={[
              {
                validator: validAgree,
              },
            ]}>
            <Checkbox className="login-checkbox-label">
              我已阅读并同意「用户协议」和「隐私条款」
            </Checkbox>
          </Form.Item>
          {/* 登录按钮 */}
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div >
  )
}
export default Login